<div class="pac-page-header">
  <div class="pac-page-title">{{ 'PAC.KEY_WORDS.DATA_SOURCES' | translate: {Default: "Data Sources"} }}</div>
</div>

<div class="w-full flex justify-start p-4">
  <ngm-search [formControl]="searchControl" />
</div>

<nav class="grid content-start grid-cols-1 gap-4 px-6 pt-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0">
  <ngm-card-create [title]="'PAC.DataSources.CreateDataSource' | translate: {Default: 'Create data source'}"
    [helpTitle]="'PAC.DataSources.CreateDataSourceHelp' | translate: {Default: 'Learn more about custom data sources'} "
    helpUrl="/docs/server/datasources/"
    (create)="create()"
  />
  @for (item of dataSources(); track item.id) {
    <div class="datasource-card group relative col-span-1 border-2 border-solid border-transparent rounded-xl shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg
            bg-gray-50 hover:bg-white dark:bg-neutral-800 dark:hover:bg-neutral-700"
      [ngClass]="routeAnimationsElements"
      [class.active]="mt.isOpen()"
      (click)="edit(item)"
    >
      <div class="flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0">
        <div class="relative shrink-0 w-20 h-20 rounded-xl overflow-hidden">
          <img src="assets/images/db-logos/{{item.type?.type}}.png">
        </div>
        <div class="grow w-0 py-[1px]">
          <div class="flex items-center text-base leading-5 font-semibold">
            <div class="truncate" [title]="item.name">{{ item.name }}</div>
          </div>
          <div class="flex items-center text-sm leading-5">
            <div class="truncate" [title]="item.type?.type">{{ item.type?.type }}</div>
          </div>
        </div>
      </div>
      <div
        class="grow mb-2 px-[14px] max-h-[72px] text-sm leading-normal line-clamp-2 group-hover:line-clamp-2 group-hover:max-h-[36px]"
      >
      </div>
      <div class="flex items-center shrink-0 mt-1 pt-1 pl-[14px] pr-[6px] pb-[6px] h-[42px]">
      </div>

      <div
        class="absolute bottom-1 left-0 right-0 items-center shrink-0 pt-1 pl-[14px] pr-[6px] pb-[6px] h-[42px]
          hidden group-hover:flex"
        (click)="$event.stopPropagation();"
      >
        <div class="grow flex items-center gap-1 w-0">
          
        </div>
        <div class="shrink-0 mx-1 w-[1px] h-[14px] bg-divider-regular"></div>
        <div class="shrink-0">
          <button
            class="bg-gray-100 !bg-transparent h-8 w-8 rounded-md border-none active:!bg-black/5 hover:!bg-black/5 dark:bg-neutral-400"
            type="button"
            [cdkMenuTriggerFor]="menu"
            [cdkMenuTriggerData]="{item: item}"
            #mt="cdkMenuTriggerFor"
            [class.active]="mt.isOpen()"
            [attr.active]="mt.isOpen()"
          >
            <div class="flex items-center justify-center w-8 h-8 cursor-pointer rounded-md">
              <i class="ri-more-line"></i>
            </div>
          </button>
        </div>
      </div>
    </div>
  }
</nav>

@if (loading()) {
  <ngm-spin class="absolute top-0 left-0 w-full h-full" />
}

<ng-template #menu let-item="item">
  <div cdkMenu class="cdk-menu__medium">
    <button cdkMenuItem (click)="edit(item)">
      <i class="ri-edit-line mr-1"></i>
      <span>
        {{ 'PAC.ACTIONS.Edit' | translate: {Default: "Edit"} }}
      </span>
    </button>

    <button cdkMenuItem (click)="copy(item)">
      <i class="ri-file-copy-line mr-1"></i>
      <span>
        {{ 'PAC.ACTIONS.Copy' | translate: {Default: "Copy"} }}
      </span>
    </button>

    <button cdkMenuItem class="danger" (click)="remove(item)">
      <i class="ri-delete-bin-line mr-1"></i>
      <span>{{ 'PAC.ACTIONS.Delete' | translate: {Default: "Delete"} }}</span>
    </button>
  </div>
</ng-template>
